<template>
  <el-drawer v-model="Showdrawer" :title="title" :with-header="true" :size="size" :destroy-on-close="flag">
    <div class="drawer">
      <slot></slot>
    </div>
    <div class="button">
      <el-button
        type="primary"
        @click="onSubmit"
         :loading="loading"
        class="w-[80px] rounded-3xl"
        >{{comfirmText}}</el-button
      >
      <el-button
        type="primary"
        @click="close"
        class="w-[80px] rounded-3xl"
        >取消</el-button
      >
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, reactive,defineEmits } from "vue";
//抽屉组件的关联数据
const Showdrawer = ref(false);
const flag = ref(false);
const loading = ref(false);
//drawre方法
const open = () => {
  Showdrawer.value = true;
};

const close = () => {
  Showdrawer.value = false;
  flag.value = true;
};

const showLoading = () => {
  loading.value = true;
}

const closeLoading = () => {
  loading.value = false;
}

//定义方法并将方法暴露出去
defineExpose({
  onSubmit,
  open,
  close,
  showLoading,
  closeLoading,
});

//父组件传递的数据
const props = defineProps({
  title: {
    type: String,
    default:""
  },
  size: {
    type: String,
    default:"45%"
  },
  comfirmText: {
    type: String,
    default:"提交"
  }
});

const emit = defineEmits(['onSubmit']);
function onSubmit()
{
  emit('onSubmit');
}

</script>

<style lang="less" scoped>
:deep(.drawer) {
  @apply flex ;
  width: 100%;
  height: 100%;
  // @apply bg-pink-200;
  overflow-y: auto;
  z-index:999;
}

.button {
   @apply flex items-center justify-center;
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   margin: 0 auto;
   bottom: 0;
}
</style>